<template>
	<div class="herb-detail-page">
		<!-- 左侧边栏 -->
		<div class="left-menu">
			<div class="float-box">
				<FloatBrif :menuList="menuList" :anchorCode="anchorCode" @toExpand="toExpand" @toJump="toJump" />
			</div>
		</div>
		<div class="herb-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />

			<div class="cont-box" v-if="detailId">
				<!-- Basic information -->
				<div ref="anchor1" class="anchor1">
					<Basic :detailId="detailId" @toCalc="toCalc"/>
				</div>

				<!-- Herb composition
						Ingredient
						Target -->
				<div ref="anchor2" class="anchor2">
					<div class="title-box">
						<TitleBox>
							<template #titlecont>
								<span class="label-link-txt" v-lang="{lang: controlSto.language, lgid: -19}">Herb</span>
								<span v-lang="{lang: controlSto.language, lgid: -25}">composition</span>
							</template>
						</TitleBox>

						<div ref="anchor2101" class="anchor2101">
							<CompIngr :detailId="detailId" @toCalc="toCalc"/>
						</div>
						<div ref="anchor2102" class="anchor2102">
							<CompTarget :detailId="detailId" @toCalc="toCalc"/>
						</div>

					</div>
				</div>

				<!-- Omics data records
						Experimental records -->
				<div ref="anchor3" class="anchor3">
					<TitleBox>
						<template #titlecont>
							<span v-lang="{lang: controlSto.language, lgid: -26}">Omics data records</span>
						</template>
					</TitleBox>
					<!-- 缺失火山-散点-柱状图 -->
					<div ref="anchor3101" class="anchor3101">
						<OmicsOverall :detailId="detailId" @toCalc="toCalc" :expIdFlag="dataObj.expIdFlag" :expId="dataObj.expId"/>
					</div>
					<div ref="anchor3102" class="anchor3102">
						<RecoExpe :detailId="detailId" @toCalc="toCalc" @getExpId="getExpId"/>
					</div>
				</div>

				<!-- Combinational landscape
						Overall network
						Ingredient-ingredient interactions
						Combined herbs
						Associated diseases
						Related literatures -->
				<div ref="anchor4" class="anchor4">

					<TitleBox>
						<template #titlecont>
							<span v-lang="{lang: controlSto.language, lgid: -28}">Combinational landscape</span>
						</template>
					</TitleBox>

					<div ref="anchor4101" class="anchor4101">
						<LandOverall :detailId="detailId" @toCalc="toCalc"/>
					</div>
					<!-- <div ref="anchor4102" class="anchor4102">
						<LandIngringrInteract :detailId="detailId" @toCalc="toCalc"/>
					
					</div> -->
					<div ref="anchor4102" class="anchor4102">
						<LandCombHerb :detailId="detailId" :detailName="detailName" @toCalc="toCalc"/>
					</div>
					<div ref="anchor4103" class="anchor4103">
						<LandAssoDise :detailId="detailId" :detailName="detailName" @toCalc="toCalc"/>
					</div>
					<div ref="anchor4104" class="anchor4104">
						<LandRelatedLite :detailId="detailId" @toCalc="toCalc"/>
					</div>
				</div>

				<!-- Related prescription -->
				<div ref="anchor5" class="anchor5">
					<RelatedPres :detailId="detailId" @toCalc="toCalc"/>
				</div>

			</div>

		</div>
  </div>
</template>



<script setup>
  import { ref, reactive, computed, onBeforeMount, onMounted, nextTick } from 'vue'
  import BreadCrumb from '@/components/BreadCrumb.vue'

	import Basic from '@/components/herb/HerbBasic.vue'
	import CompIngr from '@/components/herb/CompIngr.vue'
	import CompTarget from '@/components/herb/HerbCompTarget.vue'
	import LandRelatedLite from '@/components/herb/HerbLandRelatedLite.vue'
	import RecoExpe from '@/components/herb/HerbRecoExpe.vue'
	import OmicsOverall from '@/components/herb/HerbOmicsOverall.vue'
	import LandOverall from '@/components/herb/HerbLandOverall.vue'
	import LandIngringrInteract from '@/components/herb/HerbLandIngringrInteract.vue'
	import LandCombHerb from '@/components/herb/LandCombHerb.vue'
	import LandAssoDise from '@/components/herb/HerbLandAssoDise.vue'
	import RelatedPres from '@/components/herb/HerbRelatedPres.vue'


	import FloatBrif from '@/components/FloatBrif.vue'
	import TitleBox from '@/components/TitleBox.vue'

	import { debounce } from 'lodash'
	import { useRouter } from 'vue-router'
	import { controlStore } from '@/stores/control'
	import { langTxt, preventPeep } from '@/utils/util'

	import addImg from '@/assets/img/add.png'
	import minuImg from '@/assets/img/minu.png'

	let ancDebounce = null;

	let anchor1 = ref(null);
	let anchor2 = ref(null);
	let anchor3 = ref(null);
	let anchor4 = ref(null);
	let anchor5 = ref(null);

	let anchor2101 = ref(null);
	let anchor2102 = ref(null);
	let anchor3101 = ref(null);
	let anchor3102 = ref(null);
	let anchor4101 = ref(null);
	let anchor4102 = ref(null);
	let anchor4103 = ref(null);
	let anchor4104 = ref(null);
	let anchor4105 = ref(null);
	const anchorCode = ref('');

	let anchorObj = {
		offh1: 0,
		offh2: 0,
		offh3: 0,
		offh4: 0,
		offh5: 0,

		offh2101: 0,
		offh2102: 0,
		offh3101: 0,
		offh3102: 0,
		offh4101: 0,
		offh4102: 0,
		offh4103: 0,
		offh4104: 0,
		offh4105: 0
	};
	const controlSto = controlStore();
	const router = useRouter();
	const detailId = ref(999);
	const detailName = ref('');
	const dataObj = reactive({
		crumbList: [
			{
				fkey: '-16',
                lable: 'Home',
                name: 'home'
            }, {
				fkey: '-19',
                lable: 'Herb',
                name: 'herbsearch'
            }, {
				fkey: '-51',
                lable: 'Details',
                name: ''
            }
        ],
		isShowAnchorExp2: false,
		isShowAnchorExp3: false,
		isShowAnchorExp4: false,
		expIdFlag: 'Y',
		expId: ''
	});
	const anchorList = reactive([
	{
			anchorName: 'anchor1',
			value: anchor1
		}, {
			anchorName: 'anchor2',
			value: anchor2
		},  {
			anchorName: 'anchor3',
			value: anchor3
		},  {
			anchorName: 'anchor4',
			value: anchor4
		},  {
			anchorName: 'anchor5',
			value: anchor5
		}, {
			anchorName: 'anchor2101',
			value: anchor2101
		},  {
			anchorName: 'anchor2102',
			value: anchor2102
		},  {
			anchorName: 'anchor3101',
			value: anchor3101
		},  {
			anchorName: 'anchor3102',
			value: anchor3102
		},  {
			anchorName: 'anchor4101',
			value: anchor4101
		},  {
			anchorName: 'anchor4102',
			value: anchor4102
		}, {
			anchorName: 'anchor4103',
			value: anchor4103
		},  {
			anchorName: 'anchor4104',
			value: anchor4104
		},  {
			anchorName: 'anchor4105',
			value: anchor4105
		}, 
	])
	const menuList = reactive([
		{
			menuName: 'Herb information',
			isExpend: false,
			code: 'HerbInfo1',
			anchor: 'anchor1',
			lgid: '-115',
			children: []
		},
		{
			menuName: 'Prescription composition',
			isExpend: false,
			code: 'PresCompt1',
			anchor: 'anchor2',
			lgid: '-83',
			children: [
				{
					tmenuName: 'Ingredient',
					code: 'PresCompIngre',
					anchor: 'anchor2101',
					lgid: '-20'
				}, {
					tmenuName: 'Target',
					code: 'PresCompTarget',
					anchor: 'anchor2102',
					lgid: '-22'
				}
			]
		}, {
			menuName: 'Omics data records',
			isExpend: false,
			code: 'PresOmicst1',
			anchor: 'anchor3',
			lgid: '-26',
			children: [
				{
					tmenuName: 'Gene expression analysis',
					code: 'PresOmicsGene',
					anchor: 'anchor3101',
					lgid: '-84'
				}, {
					tmenuName: 'Experimental records',
					code: 'PresOmicsExpRecor',
					anchor: 'anchor3102',
					lgid: '-27'
				}
			]
		}, {
			menuName: 'Combinational landscape',
			isExpend: false,
			code: 'PresComLandt1',
			anchor: 'anchor4',
			lgid: '-28',
			children: [
				{
					tmenuName: 'Overall network',
					code: 'PresOverallNetwork',
					anchor: 'anchor4101',
					lgid: '-29'
				}, {
					tmenuName: 'Combined herbs',
					code: 'presComHerbs',
					anchor: 'anchor4102',
					lgid: '-33'
				},  {
					tmenuName: 'Associated diseases',
					code: 'presAssoDise',
					anchor: 'anchor4103',
					lgid: '-32'
				},  {
					tmenuName: 'Related literatures',
					code: 'presRelateLiter',
					anchor: 'anchor4104',
					lgid: '-31'
				}
			]
		}, {
			menuName: 'Related prescription',
			isExpend: false,
			code: 'PresRelatePrest1',
			anchor: 'anchor5',
			lgid: '-71',
			children: []
		}
	])

    onBeforeMount(()=> {
		initDebounce();
		// preventPeep();
		initPage();
    });
	onMounted(()=>{
		// nextTick(()=>{ // 要放在对响应式数据修改之后
		// 	obtAnchor();
		// });
		toCalc();
	});

	// const getSearchPlace = () => {
	// 	return langTxt(controlSto.language, '-15');
    // };
	const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	});
	

	const initDebounce = () => {
        ancDebounce = debounce((e) => {
          //  obtAnchor();
        }, 400);
    };
	const initPage = () => {
		if(router.currentRoute.value.query && router.currentRoute.value.query.id) {
			detailId.value = router.currentRoute.value.query.id;
			detailName.value = router.currentRoute.value.query.name;
		}
    };

	const getExpId = (id, isGenOmic) => {
		dataObj.expId = id;
		dataObj.expIdFlag = isGenOmic;
	}
	const toCalc = () => {
		nextTick(()=>{
			ancDebounce && ancDebounce();
		});
	};


	const toExpand = (item, i, flag) => {
		menuList.forEach(e => e.isExpend = false)
		item.isExpend = !flag
		menuList[i].isExpend = !flag
	};
	const toJump = (v, t, index, item) => {
		let tdiv;
		for(const o in anchorList) {
			if (anchorList[o].anchorName == v.anchor) {
				tdiv = anchorList[o].value
			}
		}
		if (t == 1) {
			anchorCode.value= v.code;
		} else {
			anchorCode.value= v.code;
		}
		window.scrollTo({top: (tdiv.offsetTop - 60), behavior: 'smooth' });
  };
   
</script>

<style lang="scss" scoped>
	.herb-detail-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		background-size: 100% 100%;
		padding-right: 50px;
		display: flex;
		// justify-content: space-between;
		align-items: top;
		.herb-cont {
			display: inline-block;
    	text-align: left;
			width: calc(100vw - 380px);
			padding-left: 30px;
			.title-box {
				padding-bottom: 32px;
			}
		}
		.left-menu {
			width: 240px;
			.float-box {
				position: fixed;
				top: 75px;
				z-index: 9999;
				.brif-box {
					.brif-item {
						position: relative;
						padding: 24px;
						border-bottom: 1px solid #E6C896;
						font-weight: 600;
						font-size: 14px;
							text-align: left;
						cursor: pointer;
						&.brif-item-on {
							background: linear-gradient( 90deg, rgba(188,159,119,0.2) 0%, rgba(188,159,119,0) 100%);
						}
						.act-box {
							position: absolute;
							right: 10px;
							height: 16px;
							// border: 1px dashed ;
							.act-img {
								width: 16px;
							}
						}
						.brif-spot {
							position: relative;
							display: inline-block;
							width: 4px;
							height: 4px;
							bottom: 3px;
							right: 6px;
							border-radius: 50%;
							background-color: #BC9F77;
						}
					}
					.brif-item-sub {
						padding-left: 36px;
					}
				}
			}
		}
	}
	
</style>
